import React from 'react';
import { Button } from 'antd';

interface IProps {
  number: number;
}

interface IStates {
  number: number;
}

export default class ClassComp extends React.Component<IProps, IStates> {
  constructor(props: IProps) {
    console.log('1. constructor');
    // 记得调用 super(props)
    super(props);
    // constructor阶段可以用来初始化state数据
    this.state = {
      number: 0,
    };
    // 可以用来绑定this 但是我们一般不这么使用
    this.handleCLick = this.handleCLick.bind(this);
  }
  // componentWillMount(): void {}

  handleCLick() {
    console.log('handleCLick');
    this.setState({ number: this.state.number + 1 });
  }

  handleChange = () => {
    console.log('handleChange');
  };

  // 接受两个参数 返回对象作为state
  static getDerivedStateFromProps(props: IProps, state: IStates) {
    console.log('2. getDerivedStateFromProps 在render之前调用的', props, state);
    const { number } = props;
    if (number % 2 === 0) {
      return { number: number * 2 };
    } else {
      // return { number: number * 3 };
      return state;
    }
  }

  // This method will not stop working in React 17.
  // getDerivedStateFromProps
  // UNSAFE_componentWillMount() {
  //   console.log('UNSAFE_componentWillMount');
  // }

  // 获取更新前的快照 before Mutation  dom变更之前的
  getSnapshotBeforeUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IStates>) {
    console.log('4.getSnapshotBeforeUpdate', prevProps, prevState);
    // 返回值给 componentDidUpdate 的第三个参数 保存一次更新前的信息
    return {
      number: 123,
    };
  }

  // pureComponent 优化
  shouldComponentUpdate(
    nextProps: Readonly<IProps>,
    nextState: Readonly<IStates>,
    nextContext: any,
  ): boolean {
    console.log('shouldComponentUpdate');
    // 返回值决定是否需要重新渲染类组件
    return true;
  }

  componentDidUpdate(
    prevProps: Readonly<IProps>, // 更新前的状态
    prevState: Readonly<IStates>, // 更新前的state
    snapshot?: any,
  ): void {
    console.log('5.componentDidUpdate', snapshot);
    // 一定要小心的使用 setState 无限循环
  }

  // dom已经创建挂载了 可以操作dom
  componentDidMount(): void {
    console.log('4.componentDidMount');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
    // 销毁工作 定时器 事件监听等
  }

  render() {
    console.log('3.render');
    return (
      <div>
        <p>类组件</p>
        <p> props: {this.props.number} </p>
        <p> state: {this.state.number} </p>
        <Button onClick={this.handleCLick} type="primary">
          +
        </Button>
      </div>
    );
  }
}
